﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="author" content="M_Adnan"/>
    <!-- Document Title -->
    <title>Product List</title>

    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="assets/rs-plugin/css/settings.css" media="screen"/>

    <!-- StyleSheets -->
    <link rel="stylesheet" href="assets/css2/ionicons.min.css">
    <link rel="stylesheet" href="assets/css2/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css2/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css2/main.css">
    <link rel="stylesheet" href="assets/css2/style.css">
    <link rel="stylesheet" href="assets/css2/responsive.css">

    <!-- Fonts Online -->
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"
          rel="stylesheet">

    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900,100'
          rel='stylesheet' type='text/css'>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min2.css"/>
    <link rel="stylesheet" href="assets/css/font-awesome.min2.css"/>
    <!-- Custom CSS -->
    <link href="assets/css/style3.css" rel="stylesheet">

    <!-- JavaScripts -->
    <script src="assets/js/vendors/modernizr.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <!--让图片一样大-->
    <style type="text/css">
        .pic {
            position: relative;
            height: 0;
            padding-top: 121.5%;
            overflow: hidden;
        }

        .pic img {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            padding: 2px;
        }
    </style>
</head>
<body>
<!-- Page Wrapper -->
<div id="wrap" class="layout-1">
    <!-- Top bar Begin -->
    <jsp:include page="header.jsp"></jsp:include>
    <!-- Top bar End -->

    <!-- Content -->
    <div id="content">
        <!-- Products -->
        <section class="padding-top-40 padding-bottom-60">
            <div class="container">
                <div class="row">
                    <!-- Products -->
                    <div class="col-md-12">
                        <!-- Short List -->
                        <div class="short-lst">
                            <h2>${movieName}</h2>
                            <ul>
                                <!-- Short List -->
                                <li>
                                    <p>共有${movieList.size()}个搜索结果</p>
                                </li>
                            </ul>
                        </div>

                        <!-- Items -->
                        <div class="col-list">
                            <c:forEach var="movie" items="${movieList}">
                                <!-- Product -->
                                <div class="product" style="width:100%;">
                                    <article>
                                        <div style="width: 100%; height:300px; margin-bottom: 20px;">
                                            <!-- Product img -->
                                            <div class="media-left" style="width: 20%;">
                                                <div class="item-img" style="width: 100%; height: 400px">
                                                    <c:choose>
                                                        <c:when test="${movie.picture eq null}">
                                                            <img class="img-responsive"
                                                                 src="${pageContext.request.contextPath }/assets/img_new/暂无海报.jpg"
                                                                 alt="">
                                                        </c:when>
                                                        <c:otherwise>
                                                            <img class="img-responsive"
                                                                 src="${pageContext.request.contextPath }/upload/${movie.picture}"
                                                                 alt="">
                                                        </c:otherwise>
                                                    </c:choose>
                                                </div>
                                            </div>

                                            <!-- Content -->
                                            <div class="media-body">
                                                <div class="row">
                                                    <!-- Content Left -->
                                                    <div class="col-sm-7">
                                                        <span class="tag"> ${movie.type} </span> <br/> <a
                                                            href="${pageContext.request.contextPath }/memberMovie?method=index&id=${movie.id}"
                                                            class="tittle"><h3>${movie.name}</h3></a>
                                                        <p>
                                                            导演: <span class="in-stock">${movie.director}</span>
                                                        </p>
                                                        <p>
                                                            演员: <span class="in-stock">${movie.actor}</span>
                                                        </p>
                                                        <p>
                                                            上映日期: <span class="in-stock">${movie.release_time}</span>
                                                        </p>
                                                        <p>
                                                            片长: <span class="in-stock">${movie.length}</span>
                                                        </p>
                                                    </div>
                                                    <!-- Content Right -->
                                                        <%--todo 个人中心--%>
                                                    <div class="col-sm-5 text-center" style="">
                                                        <a href="#" id="favorite" class="heart"><i
                                                                class="fa fa-heart"></i></a>
                                                        <div class="position-center-center">
                                                            <div class="price">
                                                                评分：
                                                                <c:choose>
                                                                    <c:when test="${movie.score eq 0}">
                                                                        暂无评分
                                                                    </c:when>
                                                                    <c:otherwise>
                                                                        ${movie.score}
                                                                    </c:otherwise>
                                                                </c:choose>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                            </c:forEach>
                        </div>
                        <!-- pagination -->
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <jsp:include page="footer.jsp"></jsp:include>
    <!-- End Footer -->

    <!-- GO TO TOP  -->
    <a href="#" class="cd-top"><i class="fa fa-angle-up"></i></a>
    <!-- GO TO TOP End -->
</div>
<!-- End Page Wrapper -->

<!-- JavaScripts -->
<script>
    $(function () {
        //评分
        $('#favorite').click(function () {
            $.ajax({
                type: "POST",
                url: getRootPath() + "/MemberAddMovieToFavorite",
                data: {
                    "id": "${movie.id}"
                },
                //                data: "score="+encodeURIComponent(score)+"&content="+encodeURIComponent(content),
                //               data: encodeURIComponent("score="+score+"&content="+content),
                //                data: $("#evaluationForm").serialize()+"&score="+score,
                dataType: "json",
                success: function (data) {
                    alert("添加成功");
                }
            })
        })

    })

    function getRootPath() {
        var strFullPath = window.document.location.href;
        var strPath = window.document.location.pathname;
        var pos = strFullPath.indexOf(strPath);
        var prePath = strFullPath.substring(0, pos);
        var postPath = strPath.substring(0,
            strPath.substr(1).indexOf('/') + 1);
        return (prePath + postPath);
    }
</script>
<script src="assets/js/vendors/jquery/jquery.min.js"></script>
<script src="assets/js/vendors/wow.min.js"></script>
<script src="assets/js/vendors/bootstrap.min.js"></script>
<script src="assets/js/vendors/own-menu.js"></script>
<script src="assets/js/vendors/jquery.sticky.js"></script>
<script src="assets/js/vendors/owl.carousel.min.js"></script>

<!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
<script type="text/javascript"
        src="assets/rs-plugin/js/jquery.tp.t.min.js"></script>
<script type="text/javascript"
        src="assets/rs-plugin/js/jquery.tp.min.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/vendors/jquery.nouislider.min.js"></script>
<script>
    jQuery(document).ready(function ($) {

        $("#price-range").noUiSlider({
            range: {
                'min': [0],
                'max': [1000]
            },
            start: [40, 940],
            connect: true,
            serialization: {
                lower: [$.Link({
                    target: $("#price-min")
                })],
                upper: [$.Link({
                    target: $("#price-max")
                })],
                format: {
                    decimals: 2,
                    prefix: '$'
                }
            }
        })
    })
</script>
</body>
</html>